<!--
  Generated template for the ProductOptionListPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-content>

  <ion-slides pager>

    <ng-container *ngFor="let option of productOptions; index as i">
      <ion-slide *ngIf="i % 3 == 0">
        <ion-row>
          <ion-col col-4 *ngIf="productOptions[i]" (click)="productOptions[i].selected ? resetOption(productOptions[i]) : selectOption(productOptions[i])">
            <div class="product-option" [ngClass]="{'selected':productOptions[i].selected}">
              <div class="option-name">{{ productOptions[i].name }}</div>
              <div class="option-price">+${{ productOptions[i].price | number: '1.1-1' }}</div>
            </div>
          </ion-col>
          <ion-col col-4 *ngIf="productOptions[i + 1]" (click)="productOptions[i+1].selected ? resetOption(productOptions[i+1]) : selectOption(productOptions[i+1])">
            <div class="product-option" [ngClass]="{'selected':productOptions[i+1].selected}">
              <div class="option-name">{{ productOptions[i + 1].name }}</div>
              <div class="option-price">+${{ productOptions[i + 1].price | number: '1.1-1' }}</div>
            </div>
          </ion-col>
          <ion-col col-4 *ngIf="productOptions[i + 2]" (click)="productOptions[i+2].selected ? resetOption(productOptions[i+2]) : selectOption(productOptions[i+2])">
            <div class="product-option" [ngClass]="{'selected':productOptions[i+2].selected}">
              <div class="option-name">{{ productOptions[i + 2].name }}</div>
              <div class="option-price">+${{ productOptions[i + 2].price | number: '1.1-1' }}</div>
            </div>
          </ion-col>
        </ion-row>
      </ion-slide>
    </ng-container>

  </ion-slides>

</ion-content>